<script lang="ts" setup>
import { message } from 'ant-design-vue';
import type { PropType } from 'vue';
import { ref } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean as PropType<boolean>,
  },
  getVisible: {
    type: Function as PropType<() => void>,
    required: true,
  },
});
const formState: any = reactive({
  company: '',
  personnelCode: '',
  name: '',
  isRdCloud: '',
  isRdBase: '',
  isRdCommon: '',
  rdCommonLevel: '',
  isRdProfession: '',
  rdProfessionLevel: '',
  rdExperienceLevel: '',
  // engineerLevel: '',
});
const rules: any = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  company: [{ required: true, message: '请输入单位', trigger: 'blur' }],
  personnelCode: [{ required: true, message: '请输入人员编码', trigger: 'blur' }],
  isRdCloud: [{ required: true, trigger: 'blur' }],
  isRdBase: [{ required: true, trigger: 'blur' }],
  isRdCommon: [{ required: true, trigger: 'blur' }],
  isRdProfession: [{ required: true, trigger: 'blur' }],
};

function onClose() {
  props.getVisible();
}
const formRef = ref<any>(null);
const fetchData = inject<() => void>('fetchData');
async function onSubmit() {
  await formRef.value.validate();
  const certification = {
    company: formState.company,
    personnelCode: formState.personnelCode,
    name: formState.name,
    isRdCloud: formState.isRdCloud,
    isRdBase: formState.isRdBase,
    isRdCommon: formState.isRdCommon,
    rdCommonLevel: formState.rdCommonLevel,
    isRdProfession: formState.isRdProfession,
    rdProfessionLevel: formState.rdProfessionLevel,
    rdExperienceLevel: formState.rdExperienceLevel,
    // engineerLevel: formState.value.engineerLevel,
  };
  await addcertification(certification).then(() => {
    message.success('新增成功!');
    props.getVisible();
    if (fetchData) {
      fetchData();
    }
    else {
      console.error('Parent method not provided');
    }
  });
}
// 刷新
</script>

<template>
  <a-drawer title="添加明细" :width="720" :visible="props.visible" :body-style="{ paddingBottom: '80px' }" @close="onClose">
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="单位" name="company">
            <a-input v-model:value="formState.company" placeholder="请输入单位" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="人员编码" name="personnelCode">
            <a-input v-model:value="formState.personnelCode" placeholder="请输入人员编码" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="姓名" name="name">
            <a-input v-model:value="formState.name" placeholder="请输入姓名" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="是否研发人员（人才云）" name="isRdCloud">
            <a-select v-model:value="formState.isRdCloud" placeholder="请选择是否是研发人员">
              <a-select-option value="1">
                是
              </a-select-option>
              <a-select-option value="0">
                否
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="是否研发人员（基准岗位）" name="isRdBase">
            <a-select v-model:value="formState.isRdBase" placeholder="请选择是否是研发人员">
              <a-select-option value="1">
                是
              </a-select-option>
              <a-select-option value="0">
                否
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="是否通过研发通用认证" name="isRdCommon">
            <a-select v-model:value="formState.isRdCommon" placeholder="请选择是否通过研发通用认证">
              <a-select-option value="1">
                是
              </a-select-option>
              <a-select-option value="0">
                否
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="研发通用认证级别" name="rdCommonLevel">
            <a-input v-model:value="formState.rdCommonLevel" placeholder="请输入研发通用认证级别" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="是否通过研发专业认证" name="isRdProfession">
            <a-select v-model:value="formState.isRdProfession" placeholder="请选择是否通过研发专业认证">
              <a-select-option value="1">
                是
              </a-select-option>
              <a-select-option value="0">
                否
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="研发专业认证认证级别" name="rdProfessionLevel">
            <a-input v-model:value="formState.rdProfessionLevel" placeholder="请输入研发专业认证认证级别" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="研发经验认证认证级别" name="rdExperienceLevel">
            <a-input v-model:value="formState.rdExperienceLevel" placeholder="请输入经验认证认证认证级别" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button style="margin-right: 8px;" @click="onClose">
        取消
      </a-button>
      <a-button type="primary" @click="onSubmit">
        提交
      </a-button>
    </div>
  </a-drawer>
</template>
